<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @keyframes progress {
      0% {
        --percentage: 0;
      }

      100% {
        --percentage: var(--value);
      }
    }

    @property --percentage {
      syntax: '<number>';
      inherits: true;
      initial-value: 0;
    }

    [role="progressbar"] {
      --percentage: var(--value);
      --primary: #369;
      --secondary: #adf;
      --size: 300px;
      animation: progress 2s 0.5s forwards;
      width: var(--size);
      aspect-ratio: 1;
      border-radius: 50%;
      position: relative;
      overflow: hidden;
      display: grid;
      place-items: center;
    }

    [role="progressbar"]::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: conic-gradient(var(--primary) calc(var(--percentage) * 1%), var(--secondary) 0);
      mask: radial-gradient(white 55%, transparent 0);
      mask-mode: alpha;
      -webkit-mask: radial-gradient(#0000 55%, #000 0);
      -webkit-mask-mode: alpha;
    }

    [role="progressbar"]::after {
      counter-reset: percentage var(--value);
      content: counter(percentage) '%';
      font-family: Helvetica, Arial, sans-serif;
      font-size: calc(var(--size) / 5);
      color: var(--primary);
    }

    /* demo */
    body {
      margin: 0;
      display: grid;
      place-items: center;
      height: 100vh;
      background: #f0f8ff;
    }
  </style>
</head>
<body>
  <div role="progressbar" style="--value: 50"></div>
</body>
</html>